<template>
	<div class="about">
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-sm-4">
						<h1>
							关于正荣
						</h1>
					</div>
					<div class="col-lg-8 col-sm-8">
						<ol class="breadcrumb pull-right">
							<li>
								<a href="#">
									首页
								</a>
							</li>
							<li class="active">
								/关于正荣
							</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<div class="top about-item">
			<div class="banner">
				<img :src="imgs[0]" alt="" class="backimg">
				<span class="left-btn" @click="go()">&lt;</span>
				<span class="right-btn" @click="back()">></span>
			</div>
			<div class="right">
				<h2 class="right-title">
					森勒整木定制,一个2012年创立于齐鲁大地的高端整木定制品牌，一直致力于为客户打造高品质整木全案定制家居。
				</h2>
				<p class="right-text">> 真材实料，精工细作是我们的郑重承诺。</p>
				<p class="right-text">> 坚持做中国整木行业领军品牌是我们的目标。</p>
				<p class="right-text">> 引领原木整装文化，承载舒适家居梦想是我们的使命。</p>
				<p class="right-text">> 以人为本，质量为先，不断创新，诚信共赢是我们的经营理念。</p>
				<div class="right-bottom">
					2016年荣获中国整木定制行业十强称号<br />
					山东整木定制行业协会理事长单位
				</div>
			</div>
		</div>
		<div class="center about-item">
			<h1 class="center-title">
				公司介绍
			</h1>
			<div class="center-content">
				<div class="introduce-item">
					<img src="../assets/images/1.png" alt="" class="introduce-item_img">
					<div class="introduce-item_right">
						<h2 class="introduce-item_title">
							设计团队
						</h2>
						<div class="introduce-item_content">
							是一家集研发、设计、生产、销售、服务为一体的专业性整体木作企业，在高端装修领域，拥有行业内超强产品结构研发，色彩美学和技术深化、工程服务的团队。
						</div>
					</div>
				</div>
				<div class="introduce-item">
					<img src="../assets/images/2.png" alt="" class="introduce-item_img">
					<div class="introduce-item_right">
						<h2 class="introduce-item_title">
							工艺材料
						</h2>
						<div class="introduce-item_content">
							公司引进全新的工艺及生产设备，进行高端实木墙板、柜体、楼梯、原木门等产品的生产和销售，产品均以 进口木料为原材料，进行实木、原木产品加工。
						</div>
					</div>
				</div>
				<div class="introduce-item">
					<img src="../assets/images/3.png" alt="" class="introduce-item_img">
					<div class="introduce-item_right">
						<h2 class="introduce-item_title">
							高速发展
						</h2>
						<div class="introduce-item_content">
							目前在全国已拥有烟台、淄博、东营、青岛、临沂、镇江等十余家经销商。与万科、富力等多家国内大型房地产企业有着良好的合作关系。
						</div>
					</div>
				</div>
				<div class="introduce-item">
					<img src="../assets/images/4.png" alt="" class="introduce-item_img">
					<div class="introduce-item_right">
						<h2 class="introduce-item_title">
							服务保障
						</h2>
						<div class="introduce-item_content">
							经过几年的发展，森勒已形成稳定的产品体系和质量标准，公司成立以来，已为上千位业主提供了高品质整木定制服务。
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom about-item">
			<h1 class="bottom-title">
				核心产品
			</h1>
			<div class="bottom-content">
				<div class="bottom-item">
					<img src="" alt="" class="bottom-item_img">
					<h1 class="bottom-item_title">测试</h1>
					<p class="bottom-item_text">测试</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data(){
	      return{
	        imgs:[
	          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg",
	          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1946402569,905750892&fm=11&gp=0.jpg"
	        ],
	      }
	    },
	    methods:{
	      
	      slideshow(){
	        setInterval(()=>{
	          let img =  this.imgs.shift();
	          this.imgs.push(img);
	        },5000)
	      },
	      go(){
	        let img =  this.imgs.pop();
	        this.imgs.unshift(img);
	      },
	      back(){
	        let img =  this.imgs.shift();
	        this.imgs.push(img);
	      }
	    },
	    created(){
	      this.slideshow();
	    }
	  }
</script>

<style lang="less" scoped>
	.breadcrumbs {
		background: #34495e;
		color: #fff;
		padding: 30px 0;
		margin-bottom: 40px;
		width: 1903px;
		margin-left: -352px;
		height: 28px;
	}

	.breadcrumbs h1 {
		font-size: 24px;
		font-weight: 600;
		margin: 3px 0 0;
		text-transform: uppercase;
		margin-left: 19%;
		margin-top: 0%;
	}

	.breadcrumb {
		margin-bottom: 0;
		background: none;
		font-size: 16px;
		margin-left: 75%;
		margin-top: -23px;
	}

	.breadcrumb li a {
		color: #48cfad;
	}

	.breadcrumb li.active {
		color: #fff;
	}

	.breadcrumb>li {
		display: inline-block;
	}

	.about {
		margin: 0 auto;
		width: 1200px;
	}

	.about-item {
		margin-top: 40px;
	}

	.top {
		display: flex;
		padding-bottom: 20px;
		border-bottom: 1px solid #ddd;
	}

	.banner {
		width: 460px;
		height: 300px;
		margin-right: 40px;
		position: relative;
		display: flex;
		overflow: hidden;
	}

	.backimg {
		width: 460px;
		height: 300px;
	}

	.left-btn,
	.right-btn {
		position: absolute;
		display: inline-block;
		width: 50px;
		height: 80px;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		top: 120px;
	}

	.right-btn {
		right: 0;
	}

	.right {
		flex: 1;
	}

	.right-title {
		color: #666;
		font-weight: 400;
		font-size: 24px;
		margin-bottom: 20px;
	}

	.right-text {
		color: #999;
		height: 30px;
	}

	.right-bottom {
		border-left: 4px solid #eee;
		color: #999;
		font-size: 20px;
		line-height: 30px;
		padding: 10px 20px;
	}

	.center-title {
		font-size: 30px;
		text-align: center;
		line-height: 60px;
		color: #777;
		font-weight: 400;
	}

	.center-content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.introduce-item {
		display: flex;
		justify-content: space-between;
		width: 550px;
		margin-right: 50px;
		margin-bottom: 20px;
	}

	.introduce-item_img {
		width: 100px;
		margin-right: 20px;
	}

	.introduce-item_title {
		color: #475168;
		font-size: 20px;
		font-weight: 400;
		margin-bottom: 10px;
	}

	.introduce-item_content {
		color: #797979;
	}

	.bottom {
		padding-bottom: 20px;
	}

	.bottom-title {
		font-size: 30px;
		text-align: center;
		line-height: 60px;
		color: #777;
		font-weight: 400;
	}

	.bottom-content {
		display: flex;
	}

	.bottom-item {
		width: 260px;
		height: 400px;
		box-sizing: border-box;
		border: 1px solid #999;
	}

	.bottom-item_img {
		width: 260px;
		height: 260px;
	}

	.bottom-item_title {
		font-size: 20px;
		font-weight: 400;
		margin: 20px 0;
	}

	.bottom-item_title,
	.bottom-item_text {
		text-indent: 5px;
	}
</style>
